<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>蛙跳点赞</title>
  <style>
    :root {
      --heart-color-1: #fff;
      --heart-color-2: #24ffbe;
      --heart-color-3: #72ff24;
      --heart-color-4: #ffe024;
      --heart-color-5: #ff7124;
      --heart-color-6: #ff2424;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #2a2c31;
    }

    .heart-icon {
      position: relative;
      cursor: pointer;
      width: 50px;
      height: 50px;
    }

    .heart-icon svg {
      position: absolute;
      top: 0;
      left: 0;
    }

    .heart-icon svg:nth-of-type(1) {
      z-index: 6;
      fill: var(--heart-color-1);
      stroke: var(--heart-color-1);
    }

    .heart-icon svg:nth-of-type(2) {
      z-index: 5;
      fill: var(--heart-color-2);
      stroke: var(--heart-color-2);
    }

    .heart-icon svg:nth-of-type(3) {
      z-index: 4;
      fill: var(--heart-color-3);
      stroke: var(--heart-color-3);
    }

    .heart-icon svg:nth-of-type(4) {
      z-index: 3;
      fill: var(--heart-color-4);
      stroke: var(--heart-color-4);
    }

    .heart-icon svg:nth-of-type(5) {
      z-index: 2;
      fill: var(--heart-color-5);
      stroke: var(--heart-color-5);
    }

    .heart-icon svg:nth-of-type(6) {
      z-index: 1;
      fill: var(--heart-color-6);
      stroke: var(--heart-color-6);
    }

    .leap {
      animation: leap 0.8s;
      transition-timing-function: cubic-bezier(0, 1, 1, 1);
      animation-fill-mode: forwards;
    }

    @keyframes leap {
      50% {
        transform: translateY(-150px);
      }

      90% {
        transform: translateY(2px);
      }

      100% {
        transform: translateY(0);
      }
    }
  </style>
</head>

<body>
  <div class="heart-icon" id="heart"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" />
    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" />
    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" />
    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" />
    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" />
    </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12.39 20.87a.696.696 0 0 1-.78 0C9.764 19.637 2 14.15 2 8.973c0-6.68 7.85-7.75 10-3.25 2.15-4.5 10-3.43 10 3.25 0 5.178-7.764 10.664-9.61 11.895z" />
    </svg></div>

  <script>
    let heartButton = document.getElementById('heart'); let hearts = Array.from(heartButton.children); hearts.reverse(); heartButton.addEventListener('click', function () { let heartIndex = 0; for (let heart of hearts) { animateLeap(heartIndex++) } hearts.reverse() }); function animateLeap(heartIndex) { hearts[heartIndex].classList.remove('leap'); hearts[heartIndex].offsetWidth; setTimeout(() => { hearts[heartIndex].classList.add('leap'); setTimeout(() => { hearts[heartIndex].style.zIndex = heartIndex; hearts[heartIndex].style.strokeWidth = heartIndex / 4 + 'px' }, 200) }, 5 * (heartIndex * 10)) }
  </script>
</body>

</html>